<!--需求计划列表-->
<template>
	<div class="m-view-demandPlanList m-window">
		<div class="m-condition" v-if="!detailShow">
			<el-row :gutter="10">
				<el-col :span="2" style="float:right">
					<el-button type="primary" @click="deletedDemandPlan" :disabled="isActive">删除</el-button>
				</el-col>
				<el-col :span="2" style="float:right">
					<el-button type="primary" @click="editDemand('edit')" :loading="btnload.edit">编辑</el-button>
				</el-col>
				<el-col :span="2" style="float:right">
					<el-button type="primary" @click="addNewDemand">新增</el-button>
				</el-col>
				<el-col :span="2" style="float:right">
					<el-button type="primary" @click="editDemand('view')" :loading="btnload.view">查看</el-button>
				</el-col>
				<el-col :span="2" style="float:right">
					<el-button type="primary" @click="search">查询</el-button>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-form
					:model="searchForm"
					ref="ruleForm"
					label-width="70px"
					:inline-message="true"
					label-position="left"
				>
					<el-col :span="6">
						<el-form-item label="公司" class="rightItem">
							<el-select
								value-key="id"
								v-model="searchForm.companyCode"
								placeholder="请选择公司"
								clearable
								ref="content"
								filterable
							>
								<el-option
									v-for="item in comOptions"
									:key="item.id"
									:label="item.companyName"
									:value="item.companyCode"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="需求号" class="rightItem">
							<el-input v-model="searchForm.demandNo" placeholder="请输入需求号" clearable maxlength="12"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="发布日期" class="rightItem">
							<el-date-picker
								v-model="searchForm.startDate"
								type="date"
								placeholder="开始日期"
								value-format="yyyy-MM-dd"
								:editable="false"
								:picker-options="pickerOoptions.start"
								clearable
							></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-date-picker
							v-model="searchForm.endDate"
							type="date"
							placeholder="结束日期"
							value-format="yyyy-MM-dd"
							:editable="false"
							:picker-options="pickerOoptions.end"
							clearable
						></el-date-picker>
					</el-col>
					<el-col :span="4">
						<el-form-item label="状态" class="rightItem">
							<el-select
								value-key="id"
								v-model="searchForm.state"
								placeholder="请选择状态"
								clearable
								ref="content"
							>
								<el-option
									v-for="item in stateOptions"
									:key="item.id"
									:label="item.label"
									:value="item.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
		</div>
		<div class="m-agTable m-bottom m-top2" v-if="!detailShow">
			<ag-grid-vue
				class="m-agTableContent ag-theme-balham"
				:gridOptions="gridOptions"
				:columnDefs="columnDefs"
				:rowData="rowData"
				v-loading="loading"
				rowSelection="multiple"
			></ag-grid-vue>
		</div>
		<!-- 分页组件 -->
		<div class="m-page" v-if="!detailShow">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pageInfo.current"
				:page-sizes="[30, 50, 100, 150, 200]"
				:page-size="pageInfo.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageInfo.total"
			></el-pagination>
		</div>
		<!-- 导入需求计划弹窗 -->
		<imoport-demand-dialog
			v-if="dialogVisible"
			:importDialogVisible="dialogVisible"
			@closeDialog="closeDialog"
			@saveImportData="saveImportData"
		></imoport-demand-dialog>
		<!-- 需求计划详情 -->
		<demand-plan-detail
			v-if="detailShow"
			@goBack="goBack"
			:rowData="detailData"
			:editModel="editModel"
			:mainForm="mainForm"
			:deletedRows="deletedRows"
			@deletedRow="deletedRow"
		></demand-plan-detail>
	</div>
</template>

<script>
import authInfo from "@/public/authInfo";
import gridOptions from "lesso-common/public/gridOptions";
import ImoportDemandDialog from "./common/imoportDemandDialog";
import DemandPlanDetail from "./common/demandPlanDetail";
import Msg from "@/public/message";
/**
 * @group demandPlanList
 * 需求计划
*/
export default {
	name: "demandPlanList",
	data () {
		return {
			loading: false,
			// 查询参数
			searchForm: {
				companyCode: "",
				demandNo: "",
				startDate: "",
				endDate: "",
				state: "",
			},
			// 所属公司
			comOptions: [],
			// 发布状态
			stateOptions: [
				{ label: "未发布", value: 0 },
				{ label: "已发布", value: 1 },
			],
			// 分页相关
			pageInfo: {
				current: 1,
				size: 30,
				total: 0,
			},
			// 表格配置
			gridOptions: {},
			// 表格列配置
			columnDefs: [],
			// 表格数据
			rowData: [],
			// 导入需求计划弹窗是否显示
			dialogVisible: false,
			//   需求计划详情页面展示
			detailShow: false,
			// 需求计划明细行
			detailData: [],
			// 编辑模式
			editModel: "add",
			// 需求计划详情主表内容
			mainForm: {},
			// 删除按钮不可点击状态
			isActive: false,
			// 编辑按钮加载状态
			btnload: {
				edit: false,
				view: false,
			},
			// 需要删除的明细行
			deletedRows: [],
			//
			pickerOoptions: {
				start: {
					disabledDate: this.disabledDate1,
				},
				end: {
					disabledDate: this.disabledDate2,
				},
			},
		};
	},
	beforeMount () {
		this.gridOptions = {
			...gridOptions(),
			onRowSelected: (gird) => {
				let rows = gird.api.getSelectedRows();
				// 状态为发布状态，删除按钮置灰不可删除
				this.isActive = rows.some((item) => {
					return item.billState == 1;
				});
			},
		};
		this.columnDefs = [
			{
				headerName: "需求号",
				field: "requestNo",
				width: 160,
				checkboxSelection: true,
				headerCheckboxSelection: true,
			},
			{
				headerName: "需求区间",
				field: "startSdate",
				width: 180,
				valueFormatter: (params) => {
					if (params.value) {
						let { startSdate, startEdate } = params.data;
						return `${this.$utils.dateFormat(
							"yyyy-MM-dd",
							startSdate
						)}~${this.$utils.dateFormat("yyyy-MM-dd", startEdate)}`;
					}
				},
			},
			{
				headerName: "公司",
				field: "companyName",
				width: 150,
				tooltipField: "companyName",
			},
			{
				headerName: "创建日期",
				field: "createDate",
				width: 120,
				valueFormatter: (params) => {
					return this.$utils.dateFormat("yyyy-MM-dd", params.value);
				},
			},
			{ headerName: "创建人", field: "creator", width: 120 },
			{
				headerName: "发布日期",
				field: "releaseDate",
				width: 120,
				valueFormatter: (params) => {
					if (params.value)
						return this.$utils.dateFormat("yyyy-MM-dd", params.value);
				},
			},
			{ headerName: "发布人", field: "releaser", width: 120 },
			{
				headerName: "状态",
				field: "billState",
				width: 100,
				valueFormatter: (params) => {
					return params.value == 1 ? "已发布" : "已保存";
				},
			},
		];
		this.getCompanyOption();
	},
	components: {
		ImoportDemandDialog,
		DemandPlanDetail,
	},
	methods: {
		/**
		 * @vuese
		 * 发布开始日期选择范围限制
		 */
		disabledDate1 (time) {
			if (this.searchForm.endDate)
				return time.getTime() > new Date(this.searchForm.endDate).getTime();
		},
		/**
		 * @vuese
		 * 发布结束日期选择范围限制
		 */
		disabledDate2 (time) {
			if (this.searchForm.startDate)
				return (
					time.getTime() <
					new Date(this.searchForm.startDate).getTime() - 3600 * 1000 * 24
				);
		},
		/**
		 * @vuese
		 * 新增需求计划
		 */
		addNewDemand () {
			this.dialogVisible = true;
		},
		/**
		 * @vuese
		 * 查询需求计划列表数据
		 * @arg 参数flag为1重置页码为1
		 */
		search (flag) {
			if (flag) this.pageInfo.current = 1;
			const { current, size } = this.pageInfo;
			const {
				companyCode,
				demandNo,
				startDate,
				endDate,
				state,
			} = this.searchForm;
			let params = {
				companyCode,
				billState: state,
				requestNo: demandNo,
				releaseSDate: startDate ? `${startDate} 00:00:00` : "", //开始日期
				releaseEDate: endDate ? `${endDate} 24:59:59` : "", //结束日期
				current,
				size,
			};
			this.loading = true;
			this.$http
				.getDemandList(params)
				.then(({ data }) => {
					this.loading = false;
					if (data.code == 1) {
						this.rowData = data.rows;
						this.pageInfo.total = data.total;
					} else {
						Msg.showErrorMsg(data.info);
					}
				})
				.catch((err) => {
					this.loading = false;
					Msg.showErrorMsg(err.data.message);
				});
		},
		/**
		 * @vuese
		 * 根据账户类型获取所属公司下拉列表
		 */
		getCompanyOption () {
			authInfo
				.getAuthInfo()
				.then((data) => {
					this.comOptions = data;
					this.searchForm.companyCode = this.comOptions[0].companyCode;
					this.search(1);
				})
				.catch((err) => {
					Msg.showErrorMsg(err.data.message);
				});
		},
		/**
		 * @vuese
		 * 每页显示条数改变回调
		 *
		 * @arg 参数为改变后的size
		 */
		handleSizeChange (val) {
			this.pageInfo.size = val;
			this.pageInfo.current = 1;
			this.search();
		},
		/**
		 * @vuese
		 * 页码改变回调
		 *
		 * @arg 参数为改变后的页码
		 */
		handleCurrentChange (val) {
			this.pageInfo.current = val;
			this.search();
		},
		/**
		 * @vuese
		 * 页码改变回调
		 *
		 * @arg 参数为Boolean,显示计划详情页
		 */
		closeDialog (showDetail) {
			this.dialogVisible = false;
			if (showDetail) this.detailShow = true;
		},
		/**
		 * @vuese
		 * 详情页组件返回事件回调
		 */
		goBack (flag) {
			this.detailShow = false;
			this.deletedRows = [];
			if (flag) this.search(1);
		},
		/**
		 * @vuese
		 * 详情页组件返回事件回调
		 *  @arg 参数为导入的明细数据
		 */
		saveImportData (detailData) {
			this.dialogVisible = false;
			this.detailShow = true;
			this.editModel = "add";
			this.detailData = detailData;
		},
		/**
		 * @vuese
		 * 删除明细行
		 * @arg 参数为要删除的明细行对象
		 */
		deletedRow (params) {
			let { rowIndex, data } = params;
			if (this.detailData.length == 1) {
				Msg.showPopMsg("请至少保留一条数据!");
				return;
			}
			this.$confirm("是否确认删除该条数据?")
				.then((_) => {
					if (this.editModel == "add") {
						this.detailData.splice(rowIndex, 1);
					} else if (this.editModel == "edit") {
						data.delFlag = 1;
						this.deletedRows.push(data);
						this.detailData.splice(rowIndex, 1);
					}
				})
				.catch((_) => { });
		},
		/**
		 * @vuese
		 * 编辑需求计划
		 *  @arg 参数为操作类型,'edit'为编辑;'view'查看
		 */
		editDemand (type) {
			let rows = this.gridOptions.api.getSelectedRows();
			if (rows.length < 1) {
				Msg.showPopMsg(
					`请选择一条你需要${type == "edit" ? "编辑" : "查看"}的数据!`
				);
				return;
			} else if (rows.length > 1) {
				Msg.showPopMsg(
					`只能选择一条你需要${type == "edit" ? "编辑" : "查看"}的数据!`
				);
				return;
			}
			this.btnload[type] = true;
			this.$http
				.getDemandPlanDetail({ id: rows[0].id })
				.then(({ data }) => {
					this.btnload[type] = false;
					if (data.info) {
						this.detailData = data.rows.requestmxs;
						this.mainForm = data.rows;
						delete this.mainForm.requestmxs;
						this.editModel = type;
						this.detailShow = true;
					} else {
						Msg.showErrorMsg(data.info);
					}
				})
				.catch((err) => {
					this.btnload[type] = false;
					Msg.showErrorMsg(err.data.message);
				});
		},
		/**
		 * @vuese
		 * 批量删除需求计划
		 */
		deletedDemandPlan () {
			let rows = this.gridOptions.api.getSelectedRows();
			if (rows.length == 0) {
				Msg.showPopMsg("请选择你需要删除的数据!");
				return;
			}
			let params = {
				modifyer: this.$global.user.employeeName,
				modifyerId: this.$global.user.id,
				ids: [],
			};
			// 需要删除的需求计划id集合
			params.ids = rows.map((row) => {
				return row.id;
			});
			this.$confirm("是否确认删除该条数据,删除后将不可恢复?").then((_) => {
				this.isActive = true;
				this.$http
					.deletedDemandPlan(params)
					.then(({ data }) => {
						this.isActive = false;
						if (data.code == 1) {
							Msg.showSuccessMsg("删除成功");
							this.search(1);
						} else {
							Msg.showErrorMsg(data.info);
						}
					})
					.catch((err) => {
						this.isActive = false;
						Msg.showErrorMsg(err.data.message);
					});
			});
		},
	},
};
</script>

<style lang="less">
.m-view-demandPlanList {
	.m-condition {
		/deep/ .el-form {
			.el-form-item {
				margin-bottom: 0px;
			}
		}
	}
}
</style>
